<!-- No modificar de aquí hasta la siguiente señalizacion -->
<html>
<head>
	<title>Campus Movil Pro</title>
	<!-- site ccs -->
	<link rel="stylesheet" type="text/css" media="screen" href="/static/css/clickers.css">	

	<!-- A partir de aqui si se puede modificar -->
	<style>
	  .visi1 { visibility:"visible" }
	  .visi2 { visibility:"hidden" }
	  .disp1 { display:"block" }
	  .disp2 { display:"none" }
	</style>
	
	<script type="text/javascript">
	function ocultar(){
		document.getElementById("field1").style.display = 'none';
	    document.getElementById("field2").style.display = 'none';
	    document.getElementById("field3").style.display = 'none';
	    document.getElementById("field4").style.display = 'none';
	    document.getElementById("field5").style.display = 'none';
	   };
	</script>
	
</head>

<body onload="ocultar();">

<div id="header"> </div>

	<div id="titulo">
		<h2>Clickers - Crear</h2>	
	</div>
	
<div id="content">

	<div id="crear_clickers">

		{% if error_message %}
		    <p><strong>{{error_message}}</strong></p>
		{% endif %}
		<form action="guardar_clicker" method = "POST">
		
		<div id="crear_clickers_ingresar">
			<p>Ingrese su pregunta (M&aacute;ximo 200 caracteres)</p>
			<input type="text" name="pregunta" size="200" value="" id="id_pregunta">
		</div>
		
		<div id="crear_clickers_grupo">
			Seleccione el grupo al que pertenecerá el clicker
			<select name="grupo_asociado" id="id_grupo_asociado">
			{% for grupo in grupos %}
			 <option value="{{ grupo }}">{{ grupo.nombre }}</option>
			{% endfor %}
			</select>
		</div>

		<div id="crear_clickers_opciones">
		
				
		Seleccione que cantidad de respuestas desea tener
		
			<!--------prueba de Javascript || para que se muestre la cantidad de opciones segun lo elija el usuario->
			<!-------->
			<style type="text/css">
			    ..formStyle {position:relative;}
			</style>
			
			<script type="text/javascript">
			
			    function validate()
			    {
			
			        var x = document.forms["myForm"];
			        var checkedButton;
			
			        // Figure out which radio button was pressed
			        checkedButton = findValue(x.receiveVia);
			
			}
			
			function showHidden(doWhat)
			{
			            document.getElementById("field1").style.display = '';
			            document.getElementById("field2").style.display = '';
			            document.getElementById("field3").style.display = '';
			            document.getElementById("field4").style.display = '';
			            document.getElementById("field5").style.display = '';
			    if(doWhat=='1'){
			            document.getElementById("field2").style.display = 'none';
			            document.getElementById("field3").style.display = 'none';
			            document.getElementById("field4").style.display = 'none';
			            document.getElementById("field5").style.display = 'none';
			    }
			    else if(doWhat=='2'){
			            document.getElementById("field3").style.display = 'none';
			            document.getElementById("field4").style.display = 'none';
			            document.getElementById("field5").style.display = 'none';
			    }
			    else if(doWhat=='3'){
			            document.getElementById("field4").style.display = 'none';
			            document.getElementById("field5").style.display = 'none';
			    }
			    else if(doWhat=='4'){
			            document.getElementById("field5").style.display = 'none';
			    }  
			}
			
			// See which radio button is selected and return its value
			function findValue(obj)
			{
			    var i, theValue;
			    theValue = null;
			
			    for (i=0;i<obj.length;i++)
			    {
			        if (obj[i].checked == true)
			        {
			            theValue = obj[i].value;
			            break;
			        }
			    }
			
			    return theValue;
			}
			</script>
			
			<div id="crear_clickers_select_opciones">
			    <p><input type="radio" name="receiveVia" value="opcion1" onclick="showHidden('1');">&nbsp; 1 respuesta </p>
			    <p><input type="radio" name="receiveVia" value="opcion2" onclick="showHidden('2');">&nbsp; 2 respuestas </p>
			    <p><input type="radio" name="receiveVia" value="opcion3" onclick="showHidden('3');">&nbsp; 3 respuestas  </p>
			    <p><input type="radio" name="receiveVia" value="opcion4" onclick="showHidden('4');">&nbsp; 4 respuestas  </p>
			    <p><input type="radio" name="receiveVia" value="opcion5" onclick="showHidden('5');">&nbsp; 5 respuestas </p>
			</div>
			
			<div id="crear_clickers_escribir_opciones">
				<!--------Opcion 1------>
				<script type="text/javascript">
				    if (document.getElementById || document.all)
				        { document.write("<div id='field1' class='formStyle'>");
				    }
				</script>
				<p><strong>Respuesta 1</strong>
				<input type="text" name="theName1" size="20">
				<script type="text/javascript">
				    if (document.getElementById || document.all)
				        { document.write("</div>");}
				</script>
				<!-------------->
				<!--------Opcion 2------>
				<script type="text/javascript">
				    if (document.getElementById || document.all)
				        { document.write("<div id='field2' class='formStyle'>");
				    }
				</script>
				<p><strong>Respuesta 2</strong>
				<input type="text" name="theName2" size="20">
				<script type="text/javascript">
				    if (document.getElementById || document.all)
				        { document.write("</div>");}
				</script>
				<!-------------->
				<!--------Opcion 3------>
				<script type="text/javascript">
				    if (document.getElementById || document.all)
				        { document.write("<div id='field3' class='formStyle'>");
				    }
				</script>
				<p><strong>Respuesta 3</strong>
				<input type="text" name="theName3" size="20">
				<script type="text/javascript">
				    if (document.getElementById || document.all)
				        { document.write("</div>");}
				</script>
				<!-------------->
				<!--------Opcion 4------>
				<script type="text/javascript">
				    if (document.getElementById || document.all)
				        { document.write("<div id='field4' class='formStyle'>");
				    }
				</script>
				<p><strong>Respuesta 4</strong>
				<input type="text" name="theName4" size="20">
				<script type="text/javascript">
				    if (document.getElementById || document.all)
				        { document.write("</div>");}
				</script>
				<!-------------->
				<!--------Opcion 5------>
				<script type="text/javascript">
				    if (document.getElementById || document.all)
				        { document.write("<div id='field5' class='formStyle'>");
				    }
				</script>
				<p><strong>Respuesta 5</strong>
				<input type="text" name="theName5" size="20">
				<script type="text/javascript">
				    if (document.getElementById || document.all)
				        { document.write("</div>");}
				</script>
				<!-------------->
			</div>
			
			<script type="text/javascript">
			// In the case of a reload, the radio button may already be clicked.
			// This code needs to be after the form.
			    var x = document.forms["myForm"];
			    if (x.receiveVia[0].checked == true)
			        { showHidden('');}
			    else if (x.receiveVia[1].checked == true)
			        { showHidden('none');}
			    else if (x.receiveVia[2].checked == true)
			        { showHidden('3');}
			    else if (x.receiveVia[3].checked == true)
			        { showHidden('none');}
			    else if (x.receiveVia[4].checked == true)
			        { showHidden('');}
			    else 
			        {;}
			
			</script>
			<!--------prueba de Javascript->
			<!-------->
		</div>
		
	<div id="footer">
		<div id="back"><a href="/clickers" > <span>Atrás</span></a></div>
		<div id="text_boton"><input type="submit" value="Crear"></div>
	</div>
		
		
		</form>

	</div>
		

<!-- No modificar de aquí hasta la siguiente señalizacion -->

</div>

</body>
</html>

<!-- A partir de aqui si se puede modificar -->

